<template>
  <div class="app-container">
    <div class="block">
      <el-row>
        <el-col :span="12" :offset="4">
          <el-form
            ref="formData"
            :model="restaurantData"
            :rules="rules"
            label-width="110px"
            class="demo-formData"
          >
            <el-form-item label="店铺名称" prop="name">
              <el-input v-model="restaurantData.name" />
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="restaurantData.address"
                auto-complete="off"
              />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model.number="restaurantData.phone"
                max-length="11"
              />
            </el-form-item>
            <el-form-item label="店铺简介" prop="description">
              <el-input v-model="restaurantData.description" />
            </el-form-item>
<!--            <el-form-item label="店铺标语" prop="promotion_info">-->
<!--              <el-input v-model="formData.promotion_info" />-->
<!--            </el-form-item>-->
            <el-form-item label="店铺分类">
<!--              <el-cascader-->
<!--                v-model="restaurantData.categoryId"-->
<!--                :options="navigates"-->
<!--                change-on-select-->
<!--              />-->
              <el-select
                v-model="restaurantData.categoryId"
                placeholder="请选择种类"
              >
                <el-option
                  v-for="item in navigates"
                  :key="item.navigateId"
                  :label="item.title"
                  :value="item.navigateId"
                />
              </el-select>
            </el-form-item>
<!--            <el-form-item label="店铺特点" style="white-space: nowrap;">-->
<!--              <span>品牌保证</span>-->
<!--              <el-switch-->
<!--                v-model="formData.is_premium"-->
<!--                on-text=""-->
<!--                off-text=""-->
<!--              />-->
<!--              <span>蜂鸟专送</span>-->
<!--              <el-switch-->
<!--                v-model="formData.deliveryMode"-->
<!--                on-text=""-->
<!--                off-text=""-->
<!--              />-->
<!--              <span>新开店铺</span>-->
<!--              <el-switch-->
<!--                v-model="formData.news"-->
<!--                on-text=""-->
<!--                off-text=""-->
<!--              />-->
<!--            </el-form-item>-->
<!--            <el-form-item style="white-space: nowrap;">-->
<!--              <span>外卖保</span>-->
<!--              <el-switch-->
<!--                v-model="formData.bao"-->
<!--                on-text=""-->
<!--                off-text=""-->
<!--              />-->
<!--              <span>准时达</span>-->
<!--              <el-switch-->
<!--                v-model="formData.zhun"-->
<!--                on-text=""-->
<!--                off-text=""-->
<!--              />-->
<!--              <span>开发票</span>-->
<!--              <el-switch-->
<!--                v-model="formData.piao"-->
<!--                on-text=""-->
<!--                off-text=""-->
<!--              />-->
<!--            </el-form-item>-->
            <el-form-item label="配送费" prop="float_delivery_fee">
              <el-input-number
                v-model="restaurantData.deliveryPrice"
                :min="0"
                :max="20"
              />
            </el-form-item>
            <el-form-item label="起送价" prop="float_minimum_order_amount">
              <el-input-number
                v-model="restaurantData.minDeliveryPrice"
                :min="0"
                :max="100"
              />
            </el-form-item>
<!--            <el-form-item label="营业时间" style="white-space: nowrap;">-->
<!--              <el-time-select-->
<!--                v-model="formData.startTime"-->
<!--                placeholder="起始时间"-->
<!--                :picker-options="{-->
<!--                  start: '05:30',-->
<!--                  step: '00:15',-->
<!--                  end: '23:30'-->
<!--                }"-->
<!--              />-->
<!--              <el-time-select-->
<!--                v-model="formData.endTime"-->
<!--                placeholder="结束时间"-->
<!--                :picker-options="{-->
<!--                  start: '05:30',-->
<!--                  step: '00:15',-->
<!--                  end: '23:30',-->
<!--                  minTime: formData.startTime-->
<!--                }"-->
<!--              />-->
<!--            </el-form-item>-->

            <el-form-item label="上传店铺图片">
              <el-upload
                action="#"
                :on-change="handleChange"
                :auto-upload="false"
                :on-preview="handlePreview"
                list-type="picture-card"
                :on-remove="handleRemove"
                :on-success="onSuccess">
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
<!--            <el-form-item label="上传营业执照">-->
<!--              <el-upload-->
<!--                class="avatar-uploader"-->
<!--                :action="fileMgrUrl"-->
<!--                :headers="uploadHeaders"-->
<!--                :show-file-list="false"-->
<!--                :on-success="handleBusinessAvatarScucess"-->
<!--                :before-upload="beforeAvatarUpload"-->
<!--              >-->
<!--                <img-->
<!--                  v-if="formData.business_license_image"-->
<!--                  :src="formData.businessLicenseImage"-->
<!--                  class="avatar"-->
<!--                >-->
<!--                <i v-else class="el-icon-plus avatar-uploader-icon" />-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="上传餐饮服务许可证">-->
<!--              <el-upload-->
<!--                class="avatar-uploader"-->
<!--                :action="fileMgrUrl"-->
<!--                :headers="uploadHeaders"-->
<!--                :show-file-list="false"-->
<!--                :on-success="handleServiceAvatarScucess"-->
<!--                :before-upload="beforeAvatarUpload"-->
<!--              >-->
<!--                <img-->
<!--                  v-if="formData.catering_service_license_image"-->
<!--                  :src="formData.cateringServiceLicenseImage"-->
<!--                  class="avatar"-->
<!--                >-->
<!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="优惠活动">-->
<!--              <el-select-->
<!--                v-model="activityValue"-->
<!--                :placeholder="activityValue"-->
<!--                @change="selectActivity"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="item in options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-table-->
<!--              :data="activities"-->
<!--              style="min-width: 600px;margin-bottom: 20px;"-->
<!--              align="cneter"-->
<!--              :row-class-name="tableRowClassName"-->
<!--            >-->
<!--              <el-table-column-->
<!--                prop="icon_name"-->
<!--                label="活动标题"-->
<!--                align="cneter"-->
<!--                width="120"-->
<!--              />-->
<!--              <el-table-column-->
<!--                prop="name"-->
<!--                label="活动名称"-->
<!--                align="cneter"-->
<!--                width="120"-->
<!--              />-->
<!--              <el-table-column-->
<!--                prop="description"-->
<!--                align="center"-->
<!--                label="活动详情"-->
<!--              />-->
<!--              <el-table-column label="操作" width="120">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-button-->
<!--                    size="small"-->
<!--                    type="danger"-->
<!--                    @click="handleDelete(scope.$index)"-->
<!--                  >删除-->
<!--                  </el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
            <el-form-item class="button_submit">
              <el-button
                type="primary"
                @click="shopApply"
              >立即申请</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { addRestaurant, getAllNavigates } from '../../api/ec/shops'
  import { uploadImg } from '../../api/ec/img'

export default {
  name: 'ShopApply',
  data() {
    return {
      city: {},
      fileMgrUrl: '/file',
      uploadHeaders: {
        Authorization: ''
      },
      restaurantData: {
        restaurantId: 0,
        name: 'aaa',
        address: 'aaa',
        imagePath: '',
        description: '',
        rating: 5,
        checkState: 0,
        categoryId: null,
        phone: '111',
        totalOrderNum: 0,
        mouthOrderNum: 0,
        minDeliveryPrice: 1,
        deliveryPrice: 1,
        averagePrice: 0,
        communityId: ''
      },
      formData: {
        name: '', // 店铺名称
        address: '', // 地址
        latitude: '',
        longitude: '',
        description: '', // 介绍
        phone: '',
        promotion_info: '',
        float_delivery_fee: 5, // 运费
        float_minimum_order_amount: 20, // 起价
        is_premium: true,
        deliveryMode: true,
        news: true,
        bao: true,
        zhun: true,
        piao: true,
        startTime: '',
        endTime: '',
        image_path: '',
        business_license_image: '',
        catering_service_license_image: ''
      },
      rules: {
        name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话' },
          { type: 'number', message: '电话号码必须是数字' }
        ]
      },
      options: [
        {
          value: '满减优惠',
          label: '满减优惠'
        },
        {
          value: '优惠大酬宾',
          label: '优惠大酬宾'
        },
        {
          value: '新用户立减',
          label: '新用户立减'
        },
        {
          value: '进店领券',
          label: '进店领券'
        }
      ],
      activityValue: '满减优惠',
      activities: [
        {
          icon_name: '减',
          name: '满减优惠',
          description: '满30减5，满60减8'
        }
      ],
      categoryOptions: [],
      selectedCategory: ['快餐便当', '简餐'],
      navigates: [],
      shopImgFile: null
    }
  },
  mounted() {
    getAllNavigates().then(response => {
      this.navigates = response
    })
  },
  methods: {
    handleChange(file) {
      this.shopImgFile = file.raw
      const form = new FormData()
      form.append('file', this.shopImgFile)
      uploadImg(form).then(response => {
        console.log('response')
        console.log(response)
        this.restaurantData.imagePath = response.data
      })
      console.log(file)
    },
    handlePreview(file) {
      console.log(file)
    },
    onSuccess(response) {
      console.log('response')
      console.log(response)
    },
    handleRemove(file) {
      console.log(file)
    },
    shopApply() {
      addRestaurant(this.restaurantData).then(response => {
        if (response.code === 200) {
          this.$message.success('添加成功')
        } else {
          this.$message.error('添加失败')
        }
      })
    }
  }
}
</script>

<style scoped>
  .button_submit {
    text-align: center;
  }

  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /deep/.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  /deep/.avatar {
    width: 120px;
    height: 120px;
    display: block;
  }

  /deep/.el-table .info-row {
    background: #c9e5f5;
  }

  /deep/.el-table .positive-row {
    background: #e2f0e4;
  }
</style>
